<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>设置marker属性</title>
  <style type="text/css">
      * {
          margin: 0px;
          padding: 0px;
      }
      body,
      button,
      input,
      select,
      textarea {
          font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
      }
      p {
          width: 603px;
          padding-top: 3px;
          margin-top: 10px;
          overflow: hidden;
      }
      .btn {
          width: 112px;
      }
  </style>
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=visualization&key=RD6BZ-KGRE3-VPT3H-3WFIY-WBF4E-ITFX6"></script>

</head>

<body onLoad="init()">
<img src="../../../images/machine/自动售货机.png">
<script>
  function init() {
    var center = new qq.maps.LatLng(39.982163, 116.306070);
    var map = new qq.maps.Map(document.getElementById("container"), {
      center: center,
      zoom: 16
    });
    //创建一个Marker
    var marker = new qq.maps.Marker({
      //设置Marker的位置坐标
      position: center,
      //设置显示Marker的地图
      map: map
    });

    //设置Marker的可见性，为true时可见,false时不可见，默认属性为true
    marker.setVisible(true);
    //设置Marker的动画属性为从落下
    marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
    //设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
    marker.setDraggable(true);
    //设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
    var anchor = new qq.maps.Point(0, 39),
        size = new qq.maps.Size(50, 50),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage(
            "../../../images/machine/自动售货机 (1).png",
            size,
            origin,
            anchor
        );
    marker.setIcon(icon);
    //添加信息窗口
    var info = new qq.maps.InfoWindow({
      map: map
    });
    //获取标记的可拖动属性
    info.open();
    info.setContent('标记的可拖动属性为：' + marker.getDraggable());
    info.setPosition(marker.getPosition());
    //标记Marker点击事件
    qq.maps.event.addListener(marker, 'click', function() {
      info.open();
      info.setContent('<div style="text-align:center;white-space:nowrap;' +
          'margin:10px;">单击标记</div>');
      info.setPosition(marker.getPosition());
    });
    //设置Marker停止拖动事件
    qq.maps.event.addListener(marker, 'dragend', function() {
      info.open();
      info.setContent('<div style="text-align:center;white-space:nowrap;' +
          'margin:10px;">拖动标记</div>');
      //getPosition()  返回Marker的位置
      info.setPosition(marker.getPosition());
    });

  }
</script>
<div style="width:603px;height:300px" id="container"></div>
<p>Marker可以拖动，点击时弹出单击信息窗口，拖动Marker时弹出拖动信息窗口</p>

</body>

</html>
